<template>
  <div class="index">
    <!-- 轮播图 -->
    <Carousel :list="bannerList"/>
    <!-- 品牌制造商 -->
    <BrandMaker
      class="container pad-30"
      :list="homeData.tagList"
      v-if="homeData.tagList && homeData.tagList.length > 0"/>
    <!-- 新品首发 -->
    <NewProducts
      class="container pad-30"
      :list="homeData.newItemList"
      v-if="homeData.newItemList && homeData.newItemList.length > 0"/>
    <!-- 人气推荐 -->
    <PopularRecommendation
      :products="homeData.indexPopularItemVO"
      v-if="homeData.indexPopularItemVO"/>
    <!-- 限时购 -->
    <LimitedTimeBuy
      class="container pad-30"/>
    <!-- 福利社 -->
    <WelfareService
      :data="homeData.saleIndexVO"
      v-if="homeData.saleIndexVO"/>
    <Cate
      class="container"
      v-for="cate in homeData.cateList"
      :key="cate.id"
      :data="cate"/>
  </div>
</template>

<script>
import NavigationBar from '@/components/index/NavigationBar'
import Carousel from '@/components/index/Carousel'
import BrandMaker from '@/components/index/BrandMaker'
import NewProducts from '@/components/index/NewProducts'
import PopularRecommendation from '@/components/index/PopularRecommendation'
import LimitedTimeBuy from '@/components/index/LimitedTimeBuy'
import WelfareService from '@/components/index/WelfareService'
import Cate from '@/components/index/Cate'
import { mapActions } from 'vuex'

import {
  fetchHomeBanner,
  fetchHomeBase
} from '@/api'

export default {
  components: {
    NavigationBar,
    Carousel,
    BrandMaker,
    NewProducts,
    PopularRecommendation,
    LimitedTimeBuy,
    WelfareService,
    Cate
  },

  data () {
    return {
      bannerList: [],
      homeData: {}
    }
  },

  /**
   * 组件被创建的方法
   */
  async created () {
    // 设置title头
    document.title = this.$i18n.t('title')
    // 获取banner的值
    this.bannerList = await fetchHomeBanner()
    // 获取首页主要数据
    this.homeData = await fetchHomeBase()
  },

  methods: {
    ...mapActions(['setCategoryInfo'])
  }
}
</script>

<style lang="less">
.index {
  .container {
    &.pad-30 {
      padding: 30px;
    }
  }
}
</style>
